<template>

<view class="">
	

<!-- 搜索 -->
  <view class="cu-bar search bg-white" id="TabCurTab">
    <view class="action text-cut locaWidth">
      <text class='text-cut'>浙江省 金华市</text>
      <text class="cuIcon-triangledownfill"></text>
    </view>
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input type="text" placeholder="搜索商品" confirm-type="search"></input>
    </view>
	<image  :src="user_data.icon" mode=""  class="cu-avatar round search_img" @tap="toMe"></image>

  </view>
<!-- 搜索end -->


<!-- 轮播图 -->
<swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="toNice(index)">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
<!-- 轮播图end -->



<!-- 宫格列表 -->
 <view class="cu-list no-border grid  card-menu "  :class="['col-' + gridCol]" >
    <view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<gridCol*2">
    <view @tap="getProductsByClassify(item.name)"  :data-value='item.name' hover-class='none'>
      <!-- <view class="cuIcon-{{item.icon}} text-{{item.color}}"> -->
	   <view :class=" ['cuIcon-' + item.icon,'text-'+item.color] " >
<!--        <view class="cu-tag badge" v-if="item.badge!=0">
          <block v-if="item.badge!=1"> {{item.badge>99?"99+":item.badge}}</block>
        </view> -->
      </view>
      <text>{{item.name}}</text>
      </view>
    </view>
  </view>
<!-- 宫格列表end -->




 <!-- 内容 -->
<view v-if="!item.is_persuaded" class='card-menu container margin-top' v-for="(item,index) in product_lists" :key="index" @tap="toProductDetail(item._id)">
    <view>
  <view class='container_img'><image :src="item.imgs[0]"></image></view>
  <view class='container_text t'><text>{{item.product_title}}</text></view>
  <view class='container_price'>
  <text class='container_price_text_0'>￥{{item.price}}</text>
  <!-- <text class='container_price_text_1'>11人想要</text> -->
  <view class="cu-tag line-orange">{{item.fresh_degree}}</view>
  </view>
  <view class='container_line'></view>
  <view class='container_user'>
 <image :src="item.icon" style="border-radius: 50px 50px;"></image>
  <text>{{item.user_name}}</text>
  </view>
  </view>
</view>
<!-- 内容end -->
<button type="default" class="publish-product" @tap="toPublishProduct">+</button>
</view>


</view>



</template>

<script>
	import store from '../../globalStore/store.json'
	import datas from '../../datas/data.json'
	export default {
		data() {
			return {
					product_lists:[],
					user_data:'',
				  // 导航条
				    TabCur: '0',
				    scrollLeft: 0,
					classify:"",
				  // 导航条end
				 scrollTop:0,//屏幕位置
				 TabCurTab:0,//吸附置顶的偏差值
				 ceil_top:'',//导航条置顶高度
				 // 轮播图
				    cardCur: 0,
				    swiperList: [{
				      id: 0,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/1.jpg'
				    }, {
				      id: 1,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/2.jpg',
				    }, {
				      id: 2,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/3.jpg'
				    }, {
				      id: 3,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/4.jpg'
				    }, {
				      id: 4,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/5.jpg'
				    }, {
				      id: 5,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/6.jpg'
				    }, {
				      id: 6,
				      type: 'image',
				      url: 'https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/girls_imgs/8.jpg'
				    }],
				    // 轮播图end
					// 宫格列表
					iconList:[],
					    gridCol: 5,
					    // 宫格列表end
						// 滚动title
						    Headlines: [{
						      id: 1,
						      title: "测试标题1",
						      type: 1
						    }, {
						      id: 2,
						      title: "测试标题2",
						      type: 2
						    }, {
						      id: 3,
						      title: "测试标题3",
						      type: 3
						    }, {
						      id: 4,
						      title: "测试标题4",
						      type: 4
						    }],
							page:1
			}
		},

		onLoad:function(){
			this.iconList=datas.iconList;
			this.user_data=store.user;
			//this.product_lists
			this.getProducts(parseInt(this.page),10);
		},
		onShow:function(){
			uni.setTabBarBadge({
			  index: 3,
			  text: store.chats_count.toString()
			})

			
		},
		//上拉刷新
		onPullDownRefresh:function() {
			//模拟加载完成
			this.page=1;
			this.product_lists=[];
			this.getProducts(parseInt(this.page),10);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 50);
		},
		//上拉刷新
		onReachBottom:function(){
			console.log("出发上拉刷新事件");
			this.page++;
			this.getProducts(parseInt(this.page),10);
		},
		methods: {
			// 导航条点击
			  tabSelect(e) {
				  // console.log(e) ;
				 
			      this.TabCur = e.currentTarget.dataset.id
			    
			  },
			  getProductsByClassify(classify){
				  this.page=1;
				  this.product_lists=[];
				  this.classify=classify
				  this.getProducts(parseInt(this.page),10);
			  },
			getProducts(page, page_size){
					var that=this;
					let classify=this.classify;
					if(classify.length==0){
						classify="#"
					}
				uni.showLoading();
				
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
					uniCloud.callFunction({
						name:"getProducts",
						data:{
							"classify":classify,
							"page":page,
							"page_size":page_size
						},
						success(res) {
							let l=res.result.lists;
							for(let i=0; i<l.length; i++){
								for(let j=0; j<l[i].imgs.length; j++){
									l[i].imgs[j]="https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/"+l[i].imgs[j];
								}
							}
							if(l.length!=0){
								that.product_lists=that.product_lists.concat(l);
							}
							
						}
					})

				},
				toNice(index){
					console.log(index);
					uni.navigateTo({
						url:"/pages/home/news-detail/news-detail?index="+index
					})
				},
			  toMe(){
					uni.switchTab({
						url:"../my/my"
					})
			  },
			  toProductDetail(id){
				  uni.navigateTo({
				  	url:"home_detail/home_detail?_id="+id
				  })
			  },
			  toPublishProduct(){
				uni.navigateTo({
					url:"publish-product/publish-product"
				})
			  },
				  //end
				  
				
				// 吸附自顶的高度
				    SelectorQuery: function () {
				      var that = this;
				      const query = wx.createSelectorQuery()
				      query.select('#navTab').boundingClientRect()
				      query.selectViewport().scrollOffset()
				      query.exec(function (res) {
				        console.log(res);
				          // ceil_top: res[0].top - res[0].height - res[0].height
						 
				      })
				    },
					
					//搜索框的高度
					  selectTab: function () {
					    var that = this;
					    const query = wx.createSelectorQuery()
					    query.select('#TabCurTab').boundingClientRect()
					    query.selectViewport().scrollOffset()
					    query.exec(function (res) {
					      console.log(res)
					        this.TabCurTab = res[0].bottom - res[0].height - 4; 
					    })
					  },
			
				

		}
	}
</script>

<style>
	.t{
		height: 40px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.home-user-icon{
		border-radius: 50px 50px;
	}
	.publish-product{
		width: 50px;
		height: 50px;
		background: #34ca20  !important;
		position: fixed;
		color: #FFFFFF !important;
		left: 80%;
		bottom: 20%;
	}
	/* 吸附置顶 */
	.navTab{
	  position: fixed;
	  z-index: 9999;
	  top: 0;
	}
	/* end */
	
	/* 搜索 */
	
	.search_img {
	  margin-right: 30rpx;
	}
	
	
	
	.locaWidth {
	  width: 21%;
	}
	
	/* end */
	
	/* 内容 */
	
	.container {
	  margin-left: 29rpx;
	  margin-right: 20rpx;
	  float: left;
	  height: 530rpx;
	  width: 43%;
	  background: white;
	  margin-bottom: 20rpx;
	}
	
	.container_img image {
	  height: 300rpx;
	  width: 100%;
	}
	
	.container_text {
	  color: black;
	  padding: 10rpx;
	  font-size: 23rpx;
	}
	
	.container_price {
	  display: flex;
	  justify-content: space-between;
	  padding-left: 8rpx;
	  padding-right: 8rpx;
	}
	
	.container_price_text_0 {
	  color: red;
	  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}
	
	.container_price_text_1 {
	  font-size: 22rpx;
	}
	
	.container_line {
	  width: 100%;
	  background: gainsboro;
	  height: 1rpx;
	  margin-top: 10rpx;
	}
	
	.container_user {
	  margin-top: 20rpx;
	  display: flex;
	  line-height: 50rpx;
	}
	
	.container_user image {
	  margin-left: 10rpx;
	  margin-right: 50rpx;
	  height: 50rpx;
	  width: 50rpx;
	}
	
	/* end */
	
	
	
	/* 滚动的title */
	
	.swiperitem {
	  background: #fff;
	  height: 40px;
	  margin-left: 30rpx;
	  margin-right: 30rpx;
	}
	
	/* end */
	
	.cu-list.grid.no-border {
	  border-radius: 0rpx;
	}
	
	/* 3布局 */
	
	
	.canui-xzwz {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1;
	}
	
	
	.canui-duotu {
	  padding: 20rpx 30rpx;
	  padding-left: 380rpx;
	  padding-bottom: 30rpx;
	  position: relative;
	  display: flex;
	}
	
	.canui-dtimg-a {
	  position: absolute;
	  left: 30rpx;
	  width: 344rpx;
	  height: 348rpx;
	}
	
	.canui-dtimg-b {
	  height: 348rpx;
	  width: 100%;
	}
	
	.canui-dtimg-ba, .canui-dtimg-bb {
	  height: 172rpx;
	}
	
	.canui-dtimg-bb {
	  margin-top: 5rpx;
	}
	
	.canui-dtimg-content {
	  position: relative;
	}
	
	.canui-dtimg-content, .canui-duotu image {
	  width: 100%;
	  height: 100%;
	}
	
	
	.canui-dtimg-text {
	  position: absolute;
	  bottom: 0px;
	  background: rgba(0, 0, 0, 0.4);
	  height: 60rpx;
	  line-height: 60rpx;
	  padding: 0 15rpx;
	}
	
	.canui-dtimg-text .text-white {
	  float: left;
	  width: auto;
	  max-width: 210rpx;
	  margin-right: 10rpx;
	  color: #aaa;
	}
	
	.canui-dtimg-text .text-price {
	  float: right;
	}
	
	.canui-dtimg-a .canui-dtimg-text {
	  border-radius: 0 0 0 10rpx;
	}
	
	.canui-dtimg-b .canui-dtimg-text .text-white {
	  max-width: 150rpx;
	}
	
	.cu-card>.cu-item {
	  margin-top: 0rpx;
	}
	
	.cu-card>.margin-top {
	  margin-top: 30rpx;
	}
	
	/* end */
	
	/* 点击回到顶部 */
	
	.goTop image {
	height: 60rpx;
	width: 60rpx;
	border-radius: 100%;
	position: fixed;
	bottom: 150rpx;
	right: 60rpx;
	z-index: 10000;
	}
	
	/* end */
	
	/* 撑高线条 */
	.lines{
	  display: flex;
	  width: 100%;
	  height: 150rpx;
	}
	/* end */
	
	/* 页脚 */
	.foot{
	  display: flex;
	  padding: 10rpx;
	  align-items: center;
	  justify-content:space-between;
	}
	.foot-1{
	  width: 35%;
	  height: 1rpx;
	  background: gainsboro;
	}
	/* end */
	
	/* 登陆按钮 */
	.loginButton{
	  width: 100%;
	}
	/* end */

</style>
